<template>
    <!-- 表格区域 -->
    <table class="table table-striped table-hover table-bordered">
        <thead>
            <tr>
                <th scope="col">序号</th>
                <th scope="col">学习科目</th>
                <th scope="col">学习内容</th>
                <th scope="col">学习地点</th>
                <th scope="col">学习状态</th>
                <th scope="col">操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 这是一行 -->
            <tr v-for="item in list" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.subject }}</td>
                <td>{{ item.content }}</td>
                <td>{{ item.place }}</td>
                <td>
                    <div class="form-check form-switch">
                        <input type="checkbox" class="form-check-input" role="switch" :id="'cb' + item.id"
                            v-model="item.status">

                        <label :for="'cb' + item.id" class="form-check-label" v-show="item.status">已完成</label>

                        <label :for="'cb' + item.id" class="form-check-label" v-show="!item.status">未完成</label>
                    </div>
                </td>
                <td>
                    <a href="javascript:;" @click="remove(item.id, item.status)">
                        删除</a>
                </td>
            </tr>
        </tbody>
    </table>
</template>
